<%--
  Created by IntelliJ IDEA.
  User: chris
  Date: 17/5/5
  Time: 下午12:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <title>慧运车结算系统</title>
    <style type="text/css">
        * {
            margin:0;
            padding:0;
        }

        html {
            width: 100%;
            height:100%;
        }

        body {
            min-height:100%;
            box-sizing: border-box;
            background: -webkit-linear-gradient(left top, #fef9ff, #18805a); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(bottom right, #fef9ff, #18805a); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(bottom right, #fef9ff, #18805a); /* Firefox 3.6 - 15 */
            background: linear-gradient(to bottom right, #fef9ff, #18805a); /* 标准的语法 */
            /*background: -ms-linear-gradient(top, #fff,  #0000ff);        !* IE 10 *!*/

            /*background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);!*火狐*!*/

            /*background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));!*谷歌*!*/

            /*background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#7de6dd69));      !* Safari 4-5, Chrome 1-9*!*/

            /*background: -webkit-linear-gradient(top, #fff,#7de6dd69);   !*Safari5.1 Chrome 10+*!*/

            /*background: -o-linear-gradient(top, #fff, #0000ff);  !*Opera 11.10+*!*/
            /*background:*/
                    /*radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,*/
                    /*radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0,*/
                    /*radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px,*/
                    /*radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px,*/
                    /*radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px,*/
                    /*radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0,*/
                    /*linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);*/
            /*background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;*/
            /*background-color: #840b2a;*/
        }
        .login-container{
            position: absolute;
            width: 30%;
            left: 35%;
            top: 25%;
        }
        .login-container>.header{
            color: #ffffff;
            /*background-color: rgba(255, 130, 19, 0.9);*/
            background-color:  #009688;;
            padding: 20px;
            /*border-bottom: 1px solid #ff8213;*/
            border-bottom: 1px solid #009688;;
            border-radius: 5px 5px 0 0;
        }
        .login-container>.body{
            background-color: rgba(255, 255, 255, 0.9);
            padding: 20px;
            border-radius: 0 0 5px 5px;
        }
        .login-container>.body .form-item [type=text], .login-container>.body .form-item [type=password]{
            color: #aaaaaa;
            font-weight: bold;
            display: inline-block;
            /*border: 1px solid rgba(255, 130, 19, 0.9);*/
            border: 1px solid #009688;
            border-radius: 5px;
            padding: 10px;
            font-size: 16px;
            margin: 10px 0;
            outline: none;
        }
        .login-container>.body .form-item [type=text] .active, .login-container>.body .form-item [type=password] .active{
            /*border: 1px dashed rgba(219, 79, 70, 0.9);*/
            border: 1px dashed #009688;
        }
        /*.login-container>.body .form-submit input[type=submit]{
            display: inline-block;
            width: 100%;
            padding: 10px 20px;
            color: #ffffff;
            background-color: rgba(255, 130, 19, 0.9);
            cursor: pointer;
            border: 0;
            border-radius: 5px;
            font-size: 16px;
            margin-top: 20px;
        }*/
        .login-container>.body .form-submit input[type=submit]{
            display: inline-block;
            width: 100%;
            padding: 10px 20px;
            color: #ffffff;
            background-color: #009688;
            cursor: pointer;
            border: 0;
            border-radius: 5px;
            font-size: 16px;
            margin-top: 20px;
            outline: none;
        }
        .login-container>.body .form-submit input[type=submit]:focus,
        .login-container>.body .form-submit input[type=submit]:hover{
            /*background-color: #ff8213;*/
            background-color: #009688;
            outline: none;
        }
        .body table td{
            padding-left: 10px;
        }
        .hyc-nav{
            /*background-color: rgba(0, 0, 0, 0.5);*/
            background-color: #009688;
        }
        .hyc-nav img{
            height: 60px;
            padding-left: 20px;
        }
        .hyc-nav>.title{
            color: #ffffff;
            display: inline-block;
            position: relative;
            top: -25px;
        }
        .msg{
            position: absolute;
            background-color: rgba(0, 0, 0, 0.6);
            color: rgba(255, 255, 255, 0.9);
            font-size: 16px;
            width: 20%;
            left: 40%;
            padding: 10px 20px;
            display: none;
            border: 0;
            border-radius: 5px;
            bottom: 0;
            transition: all .5s ease-in-out;
        }
        .msg.active{
            display: block;
            bottom: 60px;
        }

    </style>
</head>
<body>
<div class="hyc-nav">
    <img src="<%=path%>/images/huiyunche-logo-white.gif">
    <h3 class="title">慧运车结算系统</h3>
</div>
<div class="login-container">
    <div class="header">
        <h3>管理员登录</h3>
    </div>
    <div class="body">
        <form action="signin/login" method="post">
            <div style="text-align: center;">
                <table border="0" style="display: inline-table;">
                    <tbody><tr class="form-item">
                        <th>用户名</th>
                        <td>
                            <input type="text" name="username">
                            <%--<input name="username" id="id_username" placeholder="请输入用户名" type="text" required="required">--%>
                        </td>
                    </tr>
                    <tr class="form-item">
                        <th>密码</th>
                        <td>
                            <input type="password" name="password">
                            <%--<input name="password" id="id_password" placeholder="请输入密码" type="password" required="required">--%>
                        </td>
                    </tr>
                    <tr class="form-submit" style="text-align: right;">
                        <td colspan="2" style="color: red;">
                            ${message}
                        </td>
                    </tr>
                    <tr class="form-submit">
                        <td colspan="2">
                            <input type="submit" value="登录">
                        </td>
                    </tr>
                </tbody></table>
            </div>
        </form>
    </div>
</div>
</body></html>
